<template>
  <div class="tag-wrapper">
    <h1 class="mb-2">{{ obj.header }}</h1>
    <el-tag :key="item.id" v-for="item in dynamicTags" closable :disable-transitions="false" @close="handleClose(item.id)">
      {{ item.tag }}
    </el-tag>
    <el-input
      class="input-new-tag"
      v-if="inputVisible"
      v-model="inputValue"
      ref="saveTagInput"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
  </div>
</template>

<script>
export default {
  name: "TagEdit",
  props: ["obj", "urlObj"],
  data() {
    return {
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
    };
  },
  created() {
    this.fetch();
  },
  methods: {
    async fetch() {
      const { data: res } = await this.$http.post(this.urlObj.findUrl);
      if (res.code != "0") return this.$message.error("获取信息失败！");
      // const result = res.data.filter((item) => item.dict_name == this.obj.tagName);
      // console.log(result, "返回过滤后的数据");
      this.dynamicTags = [];
      res.data.forEach((item) => {
        if (item.dict_name == this.obj.tagName) {
          let id = item.dict_id;
          let tag = item.dict_lable;
          this.dynamicTags.push({ id, tag });
        }
      });
    },
    handleClose(id) {
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const formData = new FormData();
          formData.append("ids", [id]);
          const { data: res } = await this.$http.post(this.urlObj.delUrl, formData);
          if (res.code != "0") return this.$message.error("删除失败！");
          this.$message.success("删除成功");
          this.fetch();
        })
        .catch(() => {});
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    async handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        const formData = new FormData();
        formData.append("dict_name", this.obj.tagName);
        formData.append("dict_lable", inputValue);
        const { data: res } = await this.$http.post(this.urlObj.saveUrl, formData);
        if (res.code != "0") return this.$message.error("添加失败！");
        // console.log(res, "12");
        this.$message.success("添加成功");
        this.fetch();
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
};
</script>

<style lang="scss">
.tag-wrapper {
  margin-bottom: 60px;
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>
